<template>
  <div>
    <div class="header">
      <div class="title">
        <div class="title-h" @click="back()">
          <div class="icon">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="ionicon"
              viewBox="0 0 512 512"
            >
              <path
                fill="none"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="48"
                d="M328 112L184 256l144 144"
              />
            </svg>
          </div>
          <div class="txt-h">付款</div>
        </div>
      </div>
    </div>
    <div class="content_panel">
      <div class="content">
        <!-- 标题区域 -->
        <div class="content_title_panel">
          <div class="title-pp">
            <div class="icon">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="ionicon"
                viewBox="0 0 512 512"
              >
                <path
                  d="M384 400.33l35.13-.33A29 29 0 00448 371.13V140.87A29 29 0 00419.13 112l-35.13.33M128 112l-36.8.33c-15.88 0-27.2 13-27.2 28.87v230.27c0 15.87 11.32 28.86 27.2 28.86L128 400M384 192v128M320 160v192M256 176v160M192 160v192M128 192v128"
                  fill="none"
                  stroke="currentColor"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="32"
                />
              </svg>
            </div>
            <div class="content_title">向商家付款</div>
          </div>
        </div>
        <!-- 条形码区域 -->
        <div class="barcode_panel">
          <div class="barcode">
            <barcode :value="barcodes" :options="barcode_option"></barcode>
          </div>
          <div class="barcode_txt">点击查看付款码数字</div>
        </div>
        <!-- 二维码区域 -->
        <div class="qrcode_panel">
          <div class="qrcode_title"></div>
          <div class="qrcode">
            <Qrcode :qrUrlStr="QRcodes"></Qrcode>
          </div>
        </div>
        <!-- 其他功能 -->
        <div class="others_panel">
          <div class="txt">
            <div class="oleft"></div>
            <div class="oright"></div>
          </div>
        </div>
        <!-- 记录 -->
        <div class="record_panel">
          <div class="record-pp">
            <div class="icon">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="ionicon"
                viewBox="0 0 512 512"
              >
                <path
                  d="M416 221.25V416a48 48 0 01-48 48H144a48 48 0 01-48-48V96a48 48 0 0148-48h98.75a32 32 0 0122.62 9.37l141.26 141.26a32 32 0 019.37 22.62z"
                  fill="none"
                  stroke="currentColor"
                  stroke-linejoin="round"
                  stroke-width="32"
                />
                <path
                  d="M256 56v120a32 32 0 0032 32h120M176 288h160M176 368h160"
                  fill="none"
                  stroke="currentColor"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="32"
                />
              </svg>
            </div>
            <div class="record_txt">账户余额</div>
          </div>
        </div>
      </div>
    </div>
    <div class="content_bottom"></div>
  </div>
</template>
<script>
import barcode from "@xkeshi/vue-barcode";
import Qrcode from "@/components/Qrcode.vue";

export default ({
  name: "paycodepage",
  components: {
    barcode,Qrcode
  },
  data() {
    return {
      barcodes: "4789256988741233", //条形码数值
      barcode_option: {
        displayValue: false, //是否默认显示条形码文字
        background: "#fff", //条形码背景颜色
        height: "110px", //条码高度
        width:2.7,  //条形码线宽，注意这里不是宽度
        fontSize: "12px",
        lineColor: "#606266",
        margin:0, //二维码周围空白区域
      },
      QRcodes:"4789256988741233",
    };
  },
  mounted() {},
  methods: {
    back() {
      this.$router.push("/");
    },
  },
});
</script>
<style scoped>
/* 顶部搜索栏 */
.header {
  position: fixed;
  top: 0;
  z-index: 999;
  background-color: #1678ff;
  color: #fff;
  width: 100%;
}

.header .title {
  font-size: 18px;
  margin-left: 20px;
  padding: 20px 0;
}

.title-h {
  display: flex;
  flex-direction: row;
  vertical-align: middle;
  align-items: center;
}

.title-h .icon {
  width: 30px;
  height: 30px;
}

/* 内容区域样式 */
.content_panel {
  margin-top: 70px;
  background-color: #1678ff;
  /* height: 550px; */
  display: flex;
}

.content {
  margin: 10px;
  background-color: #ffffff;
  width: 100%;
  border-radius: 10px;
}

.content_title_panel {
  padding: 10px;
  color: #333333;
  font-size: 18px;
}

.title-pp {
  display: flex;
  align-items: center;
  border-bottom: solid 1px #ccc;
  vertical-align: middle;
}

.content_title_panel .icon {
  width: 25px;
  height: 25px;
}

.content_title {
  padding: 10px 0;
  margin-left: 15px;
}

/* 条形码区域 */
.barcode_panel {
  text-align: center;
  font-size: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.barcode_panel .barcode {
  background-color: #ccc;
  width: 330px;
  height: 110px;
}

/* 二维码区域 */
.qrcode_panel {
  text-align: center;
  font-size: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.qrcode_panel .qrcode_title {
  color: #333333;
  padding: 20px 0;
}

/* 二维码弹性布局自动大小 */
.qrcode_panel .qrcode {
  background-color: #ccc;
  width: 250px;
  height: 250px;
}

/* 其他功能 */
.others_panel {
  color: #999999;
  display: flex;
  flex-direction: row;
  justify-content: center;
  font-size: 16px;
  text-align: center;
}

.txt {
  width: 250px;
  display: flex;
  justify-content: space-around;
  padding: 20px 0;
}

/* 记录 */
.record_panel {
  padding: 10px;
  color: #333333;
  font-size: 18px;
}

.record_panel .record-pp {
  display: flex;
  vertical-align: middle;
  border-top: solid 1px #ccc;
  padding: 15px 0;
}

.record_panel .icon {
  width: 25px;
  height: 25px;
}

.record_panel .record_txt {
  margin-left: 10px;
  width: 100%;
}

.content_bottom {
  height: 300px;
  background-color: #1678ff;
}
</style>
